.app-index{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .slide{
        width: 100%;
        height: 170px;
        display: flex;
        
        .slide_left{
            margin: 5px;
            flex: 1;
            width: 100%;
            height: 100%;
            .swiper-wrapper{
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    
    >div:nth-child(2){
        margin-top: 10px;
        // overflow: hidden;
        display: flex;
        flex: 3;

        >a:first-child{
            flex:2;
        }
        >a:last-child{
            flex: 3;
        }
        .how_left{
            height: 100%;
            background: url(../imgs/index-card-rank.png) no-repeat bottom;
            background-size: 80%;
            background-color: rgba(21, 146, 204, 1);

            >p{
                padding-top: 10px;
                color: rgba(0, 78, 115, 100);
                font-size: 20px;  
                font-weight: bold;
                // margin-top: 5px;
                text-indent: 10px;
            }
            >span{
                
                color: rgba(255, 255, 255, 100);
                font-size: 40px; 
            }
        }
        .how_right{
           height: 100%;
           background: url(../imgs/index-card-sum.png) no-repeat center;
           background-size: 50%;
           background-color: rgba(123, 203, 245, 1);
           font-weight: bold; 

           >p{
            padding-top: 10px;
            text-indent: 10px;
            color: rgba(0, 81, 119, 100);
            font-size: 20px;
            }
            >span{
                display: block;
                margin-left: 80px;
                margin-top: 40px;
                width: 100px;
                height: 40px;
                line-height: 32px;
                border-radius: 20px;
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                text-align: center;
                border: 3px solid rgba(0, 81, 119, 100);
            }

        }

        
    }
    >div:nth-child(3),>div:nth-child(4),>div:nth-child(5){
        display: flex;
        flex: 2;
        >a:first-child{
            flex:1;
        }
        >a:last-child{
            flex: 1;
        }
        .sport_left{
            height: 100%;
        }
        .sport_right{
           height: 100%;
           
        }

    }
    >div:nth-child(3){
        a>.sport_left{
            background: url(../imgs/index-card-data.png) no-repeat;
            background-size: 100%;

            >p{
                padding-top: 10px;
                text-indent: 10px;
                color: #FFFFFF;
                font-size: 16px;
                font-weight: bold;
            }

        }
        a>.sport_right{
            background: url(../imgs/index-card-badge.png) no-repeat;
            background-color: rgb(52, 126, 238);
            background-size: 45%;
            position: relative;
            >p:first-child{
                padding-top: 10px;
                text-indent: 10px;
                color: rgba(0, 81, 119, 100);
                font-size: 16px;
                font-weight: bold;
            }
            >p:last-child{
                position: absolute;
                top: -10px;
                right: 6px;
                color: rgba(0, 81, 119, 100);
                font-size: 16px;

                >span{
                    font-size: 80px;
                }
            }
        }
    }
    >div:nth-child(4){
        >a{
            flex:1;
        }
        .course_left{
            height: 100%;
            background: url(../imgs/index-swiper-bg2.jpg) no-repeat center;
            background-size: 100%;
            >p{
                padding-top: 10px;
                text-indent: 10px;
                font-weight: bold;
                color: #FFFFFF; 
                font-size: 16px;
                
            }
        }

    }
    >div:nth-child(5){
        >a{
            flex:1;
        }
        .outdoors_left{
            height: 100%; background: url(../imgs/index-card-run.png) no-repeat center;
            background-size: 100%;
            
            >p{
                padding-top: 10px;
                text-indent: 10px;
                font-weight: bold;
                color: #FFFFFF; 
                font-size: 16px;
                
            }
        }
    }
    >div>a{
        display: block;
        padding: 5px;
    }
    >div>a>div{
        
        border-radius: 15px;
    }

}